<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 任务调度</el-breadcrumb-item>
                <el-breadcrumb-item>调度任务日志管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" setTitle>
            <el-row class="setTitle">
                <el-col :span="2" class="ml10"><span>日志归档</span></el-col>
            </el-row>
            <el-row class="mt20">
                <el-col :span="6" :offset="1">
                    <el-date-picker
                        v-model="dataValue"
                        type="daterange"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-row class="setTitle mt20">
                <el-col :span="2" class="ml10"><span>归档目录</span></el-col>
            </el-row>
            <el-row class="mt20">
                <el-col :span="3" :offset="1">
                    <el-radio v-model="radio" label="1">归档目录</el-radio>
                </el-col>
                <el-col :span="5"><el-input 
                        placeholder="C:/tmp/log/" v-model="outputDir"></el-input></el-col>
            </el-row>
            <el-row class="mt20">
                <el-col :span="3" :offset="1">
                    <el-radio v-model="radio" label="2" disabled>FTP服务</el-radio>
                </el-col>
                <el-col :span="5">
                    <el-select placeholder="请选择" v-model="optvalue" disabled>
                        <el-option value="1" label="1"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <div class="btn-container">
                <el-button type="primary" @click="handleClick" :loading="btnloading">开始归档</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            dataValue:'',
            radio:'1',
            outputDir:"",
            optvalue:'',
            btnloading: false
        }
    },
    mounted() {
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
    },
    computed: mapState({
        msg: state => state.task.msg
    }),
    methods:{
        handleClick() {
            this.btnloading = true;
            this.$store.dispatch('logStart',{
                startTime: this.dataValue[0],
                endTime: this.dataValue[1],
                outputDir: this.outputDir,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.btnloading = false;
                this.$message(this.msg);
            })
        }
    }
}
</script>
<style>
.el-button+.el-button{
    margin-left:0;
}
.setTitle{
    height: 40px;
    background-color: #eee;
    line-height: 33px;
}
.setTitle span{
    font-weight: bold;
}
</style>


